<template>
  <div class="container">
    <!-- <el-row :gutter="20">
      <el-col :xs="8" :sm="6" :md="4" :lg='2'>
        <el-input v-model="userCode" placeholder="用户id" clearable></el-input>
      </el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg='2'>
        <el-input v-model="phone" placeholder="手机号"></el-input>
      </el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg='2'>
        <el-input v-model="name" placeholder="姓名"></el-input>
      </el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg='2'>
        <el-input v-model="idCard" placeholder="身份证号码"></el-input>
      </el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg='2'>
        <el-input v-model="createTime" placeholder="注册时间开始-结束"></el-input>
      </el-col>
      <el-col :xs="8" :sm="6" :md="4" :lg='2'>
        <el-select v-model="vip" clearable placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-col>
      <el-col :xs="8" :sm="6" :md="2" :lg='2'>
        <el-button @click="search" type="primary">查询</el-button>
      </el-col>
    </el-row> -->
    <div class="flex flex-wrap f-ptp10">
      <el-input class='f-mrt20 f-mbt10 f-w120' v-model="userCode" placeholder="用户id" clearable></el-input>
      <el-input class='f-mrt20 f-mbt10 f-w120' v-model="phone" placeholder="手机号"></el-input>
      <el-input class='f-mrt20 f-mbt10 f-w120' v-model="name" placeholder="姓名"></el-input>
      <el-input class='f-mrt20 f-mbt10 f-w200' v-model="idCard" placeholder="身份证号码"></el-input>
      <el-input class='f-mrt20 f-mbt10 f-w120' v-model="createTime" placeholder="注册时间开始-结束"></el-input>
      <el-select class='f-mrt20 f-mbt10 f-w120' v-model="vip" clearable placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <el-button @click="search" type="primary">查询</el-button>
    </div>
    <div>
      <el-table
        :data="tableData"
        border
        :header-cell-style="{
            'background-color': '#fafafa'
        }"
        style="width: 100%; min-width: 1000px" >
        <el-table-column prop="userCode" label="用户id" width="180"></el-table-column>
        <el-table-column prop="phone" label="手机号" width="180"></el-table-column>
        <el-table-column prop="name" label="姓名" width="180"></el-table-column>
        <el-table-column prop="idCard" label="身份证号码" width="180"></el-table-column>
        <el-table-column prop="accountBalance" label="账户余额" width="180"></el-table-column>
        <el-table-column prop="vip" label="是否会员" width="180"></el-table-column>
        <el-table-column prop="createTime" label="注册时间" width="180"></el-table-column>
        <el-table-column prop="manage" label="管理">
          <template slot-scope="scope">
            <span @click="editBtnClickEvent(scope.$index, scope.row)" class='s-c-green f-csp f-mrt10'>编辑</span>
            <span @click="editBtnClickEvent(scope.$index, scope.row)" class='s-c-green f-csp f-mrt10'>启用</span>
            <span @click="editBtnClickEvent(scope.$index, scope.row)" class='s-c-green f-csp f-mrt10'>重置密码</span>
            <!-- <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <div>
        <!-- <el-pagination
          class='f-fr'
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-size="100"
          background
          layout="total, prev, pager, next, jumper"
          :total="1000">
        </el-pagination> -->
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: 'UserManage',
  data() {
    return {
      phone: '',
      vip: '',
      name: '',
      createTime: '',
      userCode: null,
      idCard: null,
      options: [
        {
          value: '-1',
          label: '全部'
        }, {
          value: '1',
          label: '会员'
        }, {
          value: '0',
          label: '非会员'
        }
      ],
      tableData: [
        {
          userCode: '2016-05-02',
          phone: '18098758888',
          name: '王小虎',
          idCard: '330326199908080606',
          accountBalance: 5000.00,
          vip: 1,
          createTime: '2018-12-30'
        }, {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  },
  methods: {
    search() {
      console.log('-------------search---------------');
      const obj = {};
      if(this.userCode) {
        obj.userCode = this.userCode;
      }
      if(this.phone) {
        obj.phone = this.phone;
      }
      console.log('obj==::', obj);
      // this.getUserList();
      this.getUserListByNode(obj);
    },

    getUserListByNode(obj) {
      const _this = this;
      axios.get('http://localhost:3000/api/admin/getUserList', {
        params: obj
      })
      .then(function (res) {
        console.log('getUserList', res);
        if(res.data.returnCode == 200) {
          _this.tableData = res.data.data;
        }
      })
      .catch(function (error) {
        console.log('getUserList', error);
      });
    },
    getUserList() {
      const _this = this;
      const params = new URLSearchParams();
      if(this.userId) {
        params.append('userId', this.userId);
      }
      params.append('userId', '');
      params.append('mobileNo', '');
      params.append('nickName', '');
      params.append('idCardNo', '');
      params.append('startDay', '');
      params.append('endDay', '');
      this.$axios.post(`${this.GLOBAL.baseUrl}/user/list.htm`, params)
      .then(function (res) {
        console.log('getUserList', res);
        if(res.data.returnCode == 200) {
          _this.tableData = res.data.data;
        }
      })
      .catch(function (error) {
        console.log('getUserList', error);
      });
    },
    editBtnClickEvent() {

    }

  },
  beforeCreate: function () {
    console.group('beforeCreate 创建前状态===============》');
    console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
    console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
    console.log("%c%s", "color:red","message: " + this.message)  
  },
  created: function () {
    // this.getUserList();
    this.getUserListByNode({});
    console.group('created 创建完毕状态===============》');
    console.log("%c%s", "color:red","el     : " + this.$el); //undefined
    console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化 
    console.log("%c%s", "color:red","message: " + this.message); //已被初始化
  }
  // beforeMount: function () {
  //   console.group('beforeMount 挂载前状态===============》');
  //   console.log("%c%s", "color:red","el     : " + (this.$el)); //已被初始化
  //   console.log(this.$el);
  //   console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化  
  //   console.log("%c%s", "color:red","message: " + this.message); //已被初始化  
  // },
  // mounted: function () {
  //   console.group('mounted 挂载结束状态===============》');
  //   console.log("%c%s", "color:red","el     : " + this.$el); //已被初始化
  //   console.log(this.$el);    
  //   console.log("%c%s", "color:red","data   : " + this.$data); //已被初始化
  //   console.log("%c%s", "color:red","message: " + this.message); //已被初始化 
  // },
  // beforeUpdate: function () {
  //   console.group('beforeUpdate 更新前状态===============》');
  //   console.log("%c%s", "color:red","el     : " + this.$el);
  //   console.log(this.$el);   
  //   console.log("%c%s", "color:red","data   : " + this.$data); 
  //   console.log("%c%s", "color:red","message: " + this.message); 
  // },
  // updated: function () {
  //   console.group('updated 更新完成状态===============》');
  //   console.log("%c%s", "color:red","el     : " + this.$el);
  //   console.log(this.$el); 
  //   console.log("%c%s", "color:red","data   : " + this.$data); 
  //   console.log("%c%s", "color:red","message: " + this.message); 
  // },
  // beforeDestroy: function () {
  //   console.group('beforeDestroy 销毁前状态===============》');
  //   console.log("%c%s", "color:red","el     : " + this.$el);
  //   console.log(this.$el);    
  //   console.log("%c%s", "color:red","data   : " + this.$data); 
  //   console.log("%c%s", "color:red","message: " + this.message); 
  // },
  // destroyed: function () {
  //   console.group('destroyed 销毁完成状态===============》');
  //   console.log("%c%s", "color:red","el     : " + this.$el);
  //   console.log(this.$el);  
  //   console.log("%c%s", "color:red","data   : " + this.$data); 
  //   console.log("%c%s", "color:red","message: " + this.message)
  // }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-button {
  height: 40px;
}
.login{
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

</style>
